<template>
    <div style="margin-bottom: 15px;">
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="primary">删除</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="goodsName" label="商品名称" width="90" />
        <el-table-column prop="produce" label="生产批次" width="85" />
        <el-table-column prop="safetyDay" label="保质期（天）" />
        <el-table-column prop="licenseNumber" label="生产许可证号" width="150" />
        <el-table-column prop="enterprise" label="生产企业" width="210" />
        <el-table-column prop="informationComp" label="信息完善度" width="95" />
        <el-table-column label="操作" width="220">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="ToCultivation(scope.row)">
                    详细
                </el-button>
                <el-button link type="primary" size="small" @click="GetTraceabilities(scope.row)" >修改</el-button>
                <el-button link type="primary" size="small">导出溯源码</el-button>
                <el-button link type="primary" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-pagination v-model:current-page="page.index" v-model:page-size="page.size" :page-sizes="[3, 4, 5, 6]"
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="基本信息" width="500">
        <el-form :model="form" label-width=140px>
            <el-form-item label="商品名称">
                <el-select v-model="form.goodsId" placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in options" :key="item.goodsId" :label="item.goodsName"
                        :value="item.goodsId" />
                </el-select>
            </el-form-item>
            <el-form-item label="生产批次">
                <el-input v-model="form.produce" />
            </el-form-item>
            <el-form-item label="保质期">
                <el-input v-model="form.safetyDay" />
            </el-form-item>
            <el-form-item label="生产许可证号">
                <el-input v-model="form.licenseNumber" />
            </el-form-item>
            <el-form-item label="生产企业">
                <el-input v-model="form.enterprise" />
            </el-form-item>
            <el-form-item label="封面图">
                <el-upload class="avatar-uploader" action="https://localhost:44301/api/AdminStystem/uploadFile"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form.phtoto" :src="form.phtoto" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="SaveTraceability">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible2" title="基本信息" width="500">
        <el-form :model="form1" label-width=140px>
            <el-form-item label="商品名称">
                <el-select v-model="form1.goodsId" placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in options" :key="item.goodsId" :label="item.goodsName"
                        :value="item.goodsId" />
                </el-select>
            </el-form-item>
            <el-form-item label="生产批次">
                <el-input v-model="form1.produce" />
            </el-form-item>
            <el-form-item label="保质期">
                <el-input v-model="form1.safetyDay" />
            </el-form-item>
            <el-form-item label="生产许可证号">
                <el-input v-model="form1.licenseNumber" />
            </el-form-item>
            <el-form-item label="生产企业">
                <el-input v-model="form1.enterprise" />
            </el-form-item>
            <el-form-item label="封面图">
                <el-upload class="avatar-uploader" action="https://localhost:44301/api/AdminStystem/uploadFile"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form1.phtoto" :src="form1.phtoto" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="SaveTraceabilities">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import router from '@/router';
const tableData = ref([])
const page = reactive({
    index: 1,
    size: 4,
    totalpage: 1,
    totalcount: 1,
})
const getlist = () => {
    axios.get('https://localhost:44301/api/AdminStystem/GetTraceabilitylist', {
        params: {
            index: page.index,
            size: page.size
        }
    }).then(res => {
        tableData.value = res.data.data.list
        page.totalpage = res.data.data.totalpage
        page.totalcount = res.data.data.totalcount
    })
}
const options = ref([])
const getGoodsList = () => {
    axios.get('https://localhost:44301/api/AdminStystem/GetGoods').then(res => {
        options.value = res.data.data
    })
}
watch(page, getlist)
onMounted(() => {
    getlist()
    getGoodsList()
})

const dialogFormVisible = ref(false)
const form = reactive({
    goodsId: null,
    produce: "",
    safetyDay: null,
    licenseNumber: "",
    enterprise: "",
    informationComp: "",
    phtoto: ""
})
const dialogFormVisible2 = ref(false)
const form1 = reactive({
    traceabilityId:0,
    goodsId: null,
    produce: "",
    safetyDay: null,
    licenseNumber: "",
    enterprise: "",
    informationComp: "",
    phtoto: ""
})

const GetTraceabilities = (row:any) => {
    dialogFormVisible2.value=true
    axios.get('https://localhost:44301/api/AdminStystem/Gettraceability', {
        params: {
            id: row.traceabilityId
        }
    }).then(res => {
        console.log(res.data.data)
        form1.traceabilityId=res.data.data[0].traceabilityId
        form1.goodsId=res.data.data[0].goodsId
        form1.produce = res.data.data[0].produce
        form1.safetyDay = res.data.data[0].safetyDay
        form1.licenseNumber = res.data.data[0].licenseNumber
        form1.enterprise = res.data.data[0].enterprise
        form1.phtoto = res.data.data[0].phtoto
       
    })
}
const SaveTraceabilities = () => {
    axios.post("https://localhost:44301/api/AdminStystem/UpdateTraceability", form1).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible.value = false
        }
        else {
            ElMessage.error("保存失败")
        }

    })
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.phtoto = 'https://localhost:44301' + response
    form1.phtoto = 'https://localhost:44301' + response
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('封面照必须是jpg!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('封面照大小不能超过 2MB!')
        return false
    }
    return true
}

const SaveTraceability = () => {
    axios.post("https://localhost:44301/api/AdminStystem/InsertTraceability", form).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible.value = false
        }
        else {
            ElMessage.error("保存失败")
        }

    })
}

const ToCultivation = (row: any) => {
    router.push({
        name: "CultivationQuery",
        query: ({
            id: row.traceabilityId
        })
    })
}




</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>